<template>
	<view class="main">
		<map id="myMap" class="map" :latitude="posLatitude" :longitude="posLongitude" :markers="covers" :scale="scale"
			:enable-scroll="enableZoom" :enable-zoom="enableZoom" :enable-satellite="mapType != 1"
			@regionchange="bindRegionChange"></map>
		<view class="box">
			<view class="title">{{ info.title }}</view>
			<view class="prompt">
				<view class="name">推荐指数：</view>
				<view class="stars">
					<view v-for="todo in 5" :key="todo" class="star" :class="{active: todo <= 3}"></view>
				</view>
			</view>
			<view class="goTo" @click="goTo">导航</view>
		</view>
		<view class="mapSwitch">
			<view v-if="mapType == 1" class="item" @click="switchMap(2)">卫星图</view>
			<view v-if="mapType == 2" class="item" @click="switchMap(1)">标准图</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		ref,
		nextTick,
		getCurrentInstance
	} from 'vue'

	const {
		instance,
		proxy
	} = getCurrentInstance();
	const enableZoom = false;
	let posLatitude = ref(30.33);
	let posLongitude = ref(120.18);
	let isEnableSatellite = ref(false);
	let scale = ref(12);
	let covers = ref([]);
	let info = ref({});
	let mapType = ref(1); // 地图类型 1、普通  2、卫星图
	// #ifdef MP-TOUTIAO
	const video = tt.createRewardedVideoAd({ // 激励视频
		adUnitId: `0dxfiq0byhkbxccbm6`
	});
	// #endif
	// #ifdef MP-TOUTIAO
	video.onClose((data) => {
		tt.hideLoading();
		if (data.isEnded) {
			console.log("观看了", data.count, "个视频");
			uni.showToast({
				title: "正在跳转导航页面",
				icon: 'none'
			})
			setTimeout(() => {
				uni.openLocation({
					latitude: Number(posLatitude),
					longitude: Number(posLongitude),
					name: info.address,
					address: info.address,
					complete: function(res) {
						console.log('success', res);
					}
				});
			}, 2000);
		} else {
			console.log("未观看完视频");
			uni.showToast({
				title: "观看视频中断",
				icon: 'none'
			})
		}
	});
	// #endif
	const getPosition = async (id) => { // 获取自身定位
		const res = await proxy.$http("api/spot/getSpotInfo", {
			id
		}, "GET");
		console.log(res);
		if (res.code == 200) {
			posLatitude = res.result.latitude;
			posLongitude = res.result.longitude;
			info = res.result;
			covers.value = [{
				latitude: Number(posLatitude),
				longitude: Number(posLongitude),
				iconPath: '../../static/mapPosition.png',
				width: 40,
				height: 40
			}]
		}
	}

	
	const switchMap = (index) => { // 切换地图
		mapType.value = index;
	}

	const goTo = function() { // 看广告，跳转
		// uni.showModal({
		// 	title: '提示',
		// 	content: '看完广告即可开启钓点导航',
		// 	success: function(res) {
		// 		if (res.confirm) {
		// 			console.log('用户点击确定');
		// 			// tt.showLoading();
		// 			uni.showLoading({
		// 				title: '加载中'
		// 			});
		// 			video.show();
		// 		} else if (res.cancel) {
		// 			console.log('用户点击取消');
		// 		}
		// 	}
		// });
		
		// uni.openLocation({
		// 	latitude: Number(posLatitude),
		// 	longitude: Number(posLongitude),
		// 	name: info.address,
		// 	address: info.address,
		// 	complete: function(res) {
		// 		console.log('success', res);
		// 	}
		// });
		// return
		
		uni.showToast({
			title: "正在跳转导航页面",
			icon: 'none'
		})
		setTimeout(() => {
			uni.openLocation({
				latitude: Number(posLatitude),
				longitude: Number(posLongitude),
				name: info.address,
				address: info.address,
				complete: function(res) {
					console.log('success', res);
				}
			});
		}, 2000);
	}

	onLoad((option) => {
		// 2386
		console.log("参数", option)
		getPosition(option.id);
	})
</script>

<style lang="scss" scoped>
.map {
	width: 100vw;
	height: 100vh;
}

.box {
	background: #fff;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 184rpx;
	padding: 20rpx 32rpx 0;
	box-sizing: border-box;

	.title {
		color: #1F1F1F;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.prompt {
		font-size: 28rpx;
		color: #1F1F1F;
		display: flex;
		align-items: center;

		.name {}

		.stars {
			display: flex;

			.star {
				width: 28rpx;
				height: 28rpx;
				background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/diaodianriji/star.png);
				background-size: 100% 100%;
				margin-right: 4rpx;
			}

			.active {
				background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/diaodianriji/starActive.png);
				background-size: 100% 100%;
			}
		}
	}

	.goTo {
		font-size: 28rpx;
		color: #1F1F1F;
		text-align: center;
		position: absolute;
		right: 32rpx;
		top: 20rpx;
		text-align: center;
	}

	.goTo:before {
		content: "";
		display: block;
		width: 40rpx;
		height: 40rpx;
		background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/diaodianriji/goTo.png);
		background-size: 100% 100%;
		margin: 0 auto 10rpx;
	}
}
.mapSwitch{
	width: 88rpx;
	height: 120rpx;
	border-radius: 16rpx;
	background: #fff;
	box-sizing: border-box;
	padding: 16rpx 0 0;
	position: fixed;
	right: 32rpx;
	bottom: 215rpx;
	text-align: center;
	.item{
		color: #000;
		font-size: 20rpx;
		line-height: 20rpx;
	}
	.item:before{
		content: "";
		display: block;
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 8rpx;
		background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/mapIcon.png);
		background-size: 100% 100%;
		margin: 0 auto 4rpx;
	}
	.item:nth-of-type(2):before{
		background: url(https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/mapIcon2.png);
		background-size: 100% 100%;
	}
}
</style>